<%- include('./layout/header.ejs') %>


<h1>文章列表</h1>

<div class="list-group lists" style="margin: 10px;">

  <% articles.forEach(item => { %>
  <a href="/article/info/<%= item.id %>" class="list-group-item">
    <%= item.title %>
    <span class="badge" style="background-color: #5bc0de;">发表时间：<%= item.ctime%></span>
    <span class="badge" style="background-color: #f0ad4e;">作者昵称：<%= item.nickname %></span>
  </a>
  <% }) %>

</div>

<!-- 分页区域 -->
<nav aria-label="Page navigation" class="text-center">
  <ul class="pagination">
    <!-- <li class="disabled">
          <span href="?page=1" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </span>
        </li>
        <li class="active"><a href="?page=1">1</a></li>
    
        <li class=""><a href="?page=2">2</a></li>
    
        <li class=""><a href="?page=3">3</a></li>
    
        <li class="">
          <a href="?page=2" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li> -->
  </ul>
</nav>

<script>
  // let html = '';
  let currentPage = 1;
  let pageSize = 3;
  //----------------------------------通过ajax方式分页-----------------------------
  function render(currentPage, pageSize) {
    $.ajax({
      type: "post",
      url: "/pagination",
      data: {
        "currentPage": currentPage,
        "pageSize": pageSize
      },
      dataType: "json",
      success: function (res) {
        console.log(res);
        let totalPage = res.totalPage;
        // console.log(res.totalPage);
        if (res.status == 200) {
          let dataArr = res.data;
          var html = '';
          dataArr.forEach(item => {
            html += `<a href="/article/info/${item.id}" class="list-group-item">
                    ${item.title}
                    <span class="badge" style="background-color: #5bc0de;">发表时间：${item.ctime}</span>
                    <span class="badge" style="background-color: #f0ad4e;">作者昵称：${item.nickname}/span>
                  </a>`
          });
          $('.lists').html(html);
          $(".pagination").bootstrapPaginator({
            //设置版本号 用的boostrap的版本号 不是这个插件的 本人用的是3版本的 必须用 ul
            bootstrapMajorVersion: 3,
            //设置按钮大小默认是normal
            size: 'normal',
            // 显示第几页
            currentPage: currentPage,
            // 总页数
            totalPages: totalPage,
            //显示几个按钮
            numberOfPages: 3,
            //手动修改按钮显示的内容
            itemTexts: function (type, page, current) {
              switch (type) {
                case "first":
                  return "首页";
                case "prev":
                  return "上一页";
                case "next":
                  return "下一页";
                case "last":
                  return "末页";
                case "page":
                  return page;
              }
            },
            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event, originalEvent, type, page) {
              // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面   
              currentPage = page;
              render(currentPage, pageSize);
            }
          })
        }
      }
    });
  }
  render(currentPage, pageSize);
</script>

<%- include('./layout/footer.ejs') %>